<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="addTeamData.name"
          name="name"
          label="队伍名"
          placeholder="请输入队伍名"
          :rules="[{ required: true, message: '请输入队伍名' }]"
      />
      <van-field
          v-model="addTeamData.description"
          rows="4"
          autosize
          label="队伍描述"
          type="textarea"
          placeholder="请输入队伍描述"
      />
      <van-field
          v-model="formatDate"
          is-link
          readonly
          type="datetime"
          name="datetimePicker"
          label="过期时间"
          :placeholder="addTeamData.expireTime===null?'点击选择过期时间':addTeamData.expireTime"
          @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" position="bottom">
        <van-datetime-picker
            v-model="addTeamData.expireTime"
            type="datetime"
            title="选择过期时间"
            :min-date="minData"
            @confirm="confirmSelectDate"
            @cancel="showPicker = false"
        />
      </van-popup>

      <van-field name="radio" label="队伍状态">
        <template #input>
          <van-radio-group v-model="addTeamData.status" direction="horizontal">
            <van-radio name="0">公开</van-radio>
            <van-radio name="1">私有</van-radio>
            <van-radio name="2">加密</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
          v-if="addTeamData.status === '2'"
          v-model="addTeamData.password"
          type="password"
          name="password"
          label="密码"
          placeholder="请输入队伍密码"
          :rules="[{ required: true, message: '请输入队伍密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        登陆
      </van-button>
    </div>
  </van-form>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.js";
import {Toast} from "vant";
import {useRoute, useRouter} from "vue-router";

// 展示日期选择器
const showPicker = ref(false);

const minData = new Date();
const route = useRoute();
const router = useRouter();

const initFormData = {
  "name": "",
  "description": "",
  "password": "",
  "expireTime": null,
  "status": 0,
}
// 用户填写的表单数据
const addTeamData = ref({});

const id = route.query.id;

// 获取之前的队伍信息
onMounted(async () => {
  if (id <= 0) {
    Toast.fail('加载队伍失败');
    return;
  }
  const res = await myAxios.get('/team/list', {
    params: {
      id: route.query.id
    }
  });
  if (res?.code === 0) {
    addTeamData.value = res.data[0];

    console.log(addTeamData.value)
  } else {
    Toast.fail('加载队伍失败，请刷新重试');
  }
});

const confirmSelectDate = (value) => {
  formatDate.value = value;
  showPicker.value = false;
  const year = value.getFullYear();
  let month = value.getMonth() + 1;
  if (month < 10) {
    month = '0' + month;
  }
  let day = value.getDate();
  if (day < 10) {
    day = '0' + day;
  }
  let hours = value.getHours();
  if (hours < 10) {
    hours = '0' + hours;
  }
  let minutes = value.getMinutes();
  if (minutes < 10) {
    minutes = '0' + minutes;
  }
  let seconds = value.getSeconds();
  if (seconds < 10) {
    seconds = '0' + seconds;
  }
  const date = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
  formatDate.value = date
  console.log(formatDate.value)
};

const formatDate = ref('');

// 提交
const onSubmit = async () => {
  const postData = {
    ...addTeamData.value,
    status: Number(addTeamData.value.status)
  }
  // todo 前端参数校验
  const res = await myAxios.post('/team/update', addTeamData.value);
  console.log(res)
  if (res.code === 0 && res.data) {
    Toast.success('更新成功');
    router.push({
      path: '/team',
      replace: true
    });
  } else {
    Toast.fail('更新失败');
  }
}

</script>

<style scoped>

</style>
